<template>
  <div class="mainos">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <el-form
          :inline="true"
          :rules="rules"
          class="demo-form-inline marginTop0"
          ref="userListFrom"
          label-width="60px"
        >
          <div class="main_crumbs boxdq">
            <div class="main_crumbs_l">
              <a href="javascript:;" @click="$router.back(-1)">
                <i class="el-icon-arrow-down"></i>返回
              </a>
              <em>|</em>
              <span>查看订单</span>
            </div>
            <div class="main_crumbs_rt">
              <el-button v-repeatClick class="marginLeft5" @click="print"
                >打印</el-button
              >
            </div>
          </div>
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>基础信息</div>
          </div>
          <div class="main_xq afterbox">
            <ul class="boxha">
              <li>
                退货单号：<span>{{ info.order_sn }}</span>
              </li>
              <li>
                创建时间：<span>{{
                  parseTime(info.created_at, "{y}-{m}-{d}")
                }}</span>
              </li>
              <li>
                单据状态：<span>{{ order_status[info.status] }}</span>
              </li>
              <li>
                申请金额：<span>{{ info.apply_money }}</span>
              </li>
              <li>
                实退金额：<span>{{ info.real_money }}</span>
              </li>
              <li>
                用户名称：<span>{{ info.nickname }}</span>
              </li>
              <li>
                关联订单：<span>{{
                  info.related_order_sn ? info.related_order_sn : ""
                }}</span>
              </li>
              <li>
                订单支付状态：<span>{{ pay_type[info.order_pay_status] }}</span>
              </li>
              <li>
                订单配送日期：<span>{{
                  info.order_send_time
                    ? parseTime(info.order_send_time, "{y}-{m}-{d}")
                    : ""
                }}</span>
              </li>
              <li>
                审核日期：<span>{{
                  info.check_time
                    ? parseTime(info.check_time, "{y}-{m}-{d}")
                    : ""
                }}</span>
              </li>
              <li>
                退货原因：<span>{{ info.return_remark }}</span>
              </li>
              <li>
                业务员：<span>{{
                  info.salesman ? info.salesman.name : ""
                }}</span>
              </li>
              <li>
                业务员手机：<span>{{ info.salesman_mobile }}</span>
              </li>
              <li>
                司机：<span>{{ info.driver ? info.driver.name : "" }}</span>
              </li>
              <li>
                司机手机：<span>{{ info.driver_mobile }}</span>
              </li>
              <li class="main_w100" v-if="info.status == 4">
                驳回原因：<span>{{ info.reject_remark }}</span>
              </li>
            </ul>
          </div>

          <div class="main_tile boxdq marginTop15">
            <div class="main_tile_l marginLeft0"><em></em>商品详情</div>
          </div>
          <div class="main_white marginBottom10">
            <div class="main_white">
              <div class="main_table marginTop0">
                <el-table
                  ref="multipleTable"
                  :data="info.return_list"
                  element-loading-text="加载中"
                  fit
                  border
                  highlight-current-row
                >
                  <el-table-column label="序号">
                    <template slot-scope="scope">{{
                      scope.$index + 1
                    }}</template>
                  </el-table-column>
                  <el-table-column label="商品名称" prop="name">
                    <template slot-scope="scope"
                      >{{
                        scope.row.goods_name ? scope.row.goods_name : ""
                      }}【{{ scope.row.spu_name }}】</template
                    >
                  </el-table-column>
                  <el-table-column label="单位" prop="unit" />
                  <el-table-column label="配送数量" prop="send_num" />
                  <el-table-column
                    label="配送单价"
                    prop="send_price"
                    class-name="main_hei"
                  />
                  <el-table-column
                    label="申请数量"
                    prop="apply_num"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">{{
                      scope.row.apply_num
                    }}</template>
                  </el-table-column>
                  <el-table-column label="申请单价" prop="apply_price" />
                  <el-table-column label="申请金额" prop="apply_money" />
                  <el-table-column label="实退数量" prop="real_num" />
                  <el-table-column label="实退单价" prop="real_price" />
                  <el-table-column label="实退金额" prop="real_money" />
                  <!-- <el-table-column label="报损数量" prop="report_spills_num" /> -->
                  <el-table-column label="备注" prop="remark" />
                </el-table>
              </div>
            </div>
          </div>

          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>其他</div>
          </div>
          <div class="main_xq">
            <ul class="boxha">
              <li class="main_w100">
                合计：<span>{{ info.real_money }}</span>
              </li>
              <li class="main_w100 box marginTop20">
                显示相关凭证：
                <div class="box main_xqi">
                  <div
                    class="main_xqi_i marginRight10"
                    v-for="(pics, index) in info.pics"
                    :key="index"
                  >
                    <label class="el-upload-list__item-status-label">
                      <!-- v-if="pics.includes(info.pic)" -->
                      <i class="el-icon-upload-success el-icon-check"></i>
                    </label>
                    <el-image
                      fit="fill"
                      :src="pics"
                      :preview-src-list="info.pics"
                    >
                      <div slot="error" class="image-slot">
                        <img :src="puzzleImg" />
                      </div>
                    </el-image>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </el-form>
        <div class="main_tile boxdq marginTop20">
          <div class="main_tile_l marginLeft0"><em></em>生命周期</div>
        </div>
        <div class="main_table marginTop0">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="logs"
            element-loading-text="加载中"
            fit
            highlight-current-row
          >
            <el-table-column
              label="管理员"
              prop="admin.name"
              class-name="main_hei"
            />
            <el-table-column
              label="操作"
              prop="operate.name"
              class-name="main_hei"
            />
            <el-table-column label="内容" prop="content" class-name="main_hei">
              <template slot-scope="scope">
                <div
                  v-for="(content, index) in scope.row.content"
                  :key="index"
                  class="marginTop5 marginBottom5"
                >
                  {{ content }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="IP" prop="ip" class-name="main_hei" />
            <el-table-column
              label="时间"
              prop="created_at"
              class-name="main_hei"
            >
              <template slot-scope="scope">{{
                parseTime(scope.row.created_at)
              }}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 打印子组件 -->
    <order-print
      ref="printTemplate"
      v-show="false"
      id="printname"
    ></order-print>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { return_order_info } from "@/api/order/orderReturn";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/financial/financialRecharge_record";
import { parseTime } from "@/utils/index";
import { puzzleImg } from "@/api/currency";
import OrderPrint from "@/views/order/orderPrint.vue";

export default {
  computed: {
    ...mapGetters(["avatar"]),
  },
  components: {
    OrderPrint,
  },
  watch: {},
  data() {
    return {
      // 验证
      rules,
      // 时间
      parseTime,
      // 基本信息
      info: {
        return_list: [],
        pics: [],
      },
      logs: [],
      order_status: [],
      pay_type: [],
      statusList: [],
      puzzleImg,
      listLoading: false,

      id: this.$route.params.id,
    };
  },

  created() {
    this.return_order_info();
  },
  methods: {
    return_order_info() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      return_order_info(data).then((res) => {
        if (res.errcode == 0) {
          if (res.data.info.pics) {
            res.data.info.pics = JSON.parse(res.data.info.pics);
          }
          this.info = res.data.info;
          if (res.data.logs) {
            res.data.logs.map((e) => {
              if (e.content) {
                e.content = JSON.parse(e.content);
              }
            });
          }
          this.logs = res.data.logs;
          this.order_status = res.data.order_status;
          this.pay_type = res.data.pay_type;
          this.statusList = res.data.statusList;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    print() {
      let id = this.id;
      this.$refs.printTemplate.$emit("demo", { id: id, type: "order_return" });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
  .main_tile {
    .mainos_tile_r {
      color: $colour_red;
      font-size: $font_14;
    }
  }
  .newConBox.on {
    margin-left: -10px;
  }
  .main_table {
    /deep/.el-table--small td {
      padding-top: 16px;
    }
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 16px;
      margin-top: 16px;
      margin-right: 0;
    }
  }
  .main_xqs {
    width: 55%;
    display: block;
    text-align: left;
    /deep/.el-input--small {
      width: 100%;
    }
  }
  .main_xq {
    ul {
      li {
        .main_xqi_i {
          position: relative;
          width: 120px;
          overflow: hidden;
          /deep/.el-upload-list__item-status-label {
            position: absolute;
            right: -15px;
            top: -6px;
            z-index: 91;
            width: 40px;
            height: 24px;
            background: #13ce66;
            text-align: center;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
            display: block;
            i {
              font-size: $font_12;
              margin-top: 11px;
              color: $white;
              -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
            }
          }
        }
        /deep/.el-image .el-image__inner {
          width: 120px;
          height: 120px;
          border: 1px solid #f8f8f9;
          margin-right: 20px;
        }
        /deep/.el-image .image-slot img {
          width: 120px;
          height: 120px;
          border: 1px solid #f8f8f9;
          margin-right: 20px;
        }
        .main_xqi {
          width: 80%;
          margin-left: 5px;
        }
        .main_upImg {
          /deep/ul {
            li {
              padding-left: 0;
            }
          }
          /deep/.el-upload-list--picture-card
            .el-upload-list__item:first-child {
            margin-left: 145px;
          }
        }
      }
    }
  }

  .mainor_pr {
    margin-left: 10px;
    margin-bottom: 10px;
  }
  .base_p {
    width: 80px;
  }
  .main_page_top {
    margin-top: 7px;
    margin-left: 10px;
    use {
      fill: $menuText;
    }
    &:hover {
      cursor: pointer;
      use {
        fill: $menuActiveText;
      }
    }
  }
}
.afterbox > ul > li {
  width: 20% !important;
}
</style>
